<template>
  <div id="app">
    <number-sort />
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          v-model="newTodeRef"
          @keyup.enter="addTodo"
          @blur="addTodo"
          class="new-todo"
          autofocus=""
          autocomplete="off"
          placeholder="What needs to be done?" />
      </header>
      <section class="main" v-show="todoRef.length > 0">
        <input
          id="toggle-all"
          v-model="allDoneRef"
          class="toggle-all"
          type="checkbox" />
        <label for="toggle-all">Mark all as complete</label>
        <transition-group name="todolist" tag="ul" class="todo-list">
          <li
            class="todo"
            :class="{ completed: v.completed, editing: v == editingTodoRef }"
            v-for="v in filterTodoRef"
            :key="v.id">
            <div class="view">
              <input v-model="v.completed" class="toggle" type="checkbox" />
              <label @dblclick="editTodo(v)">{{ v.title }}</label>
              <button class="destroy" @click="delTodo"></button>
            </div>
            <input
              v-model="v.title"
              @blur="doneTodo(v)"
              @keyup.esc="cancelEdit(v)"
              @keyup.enter="doneTodo(v)"
              class="edit"
              type="text" />
          </li>
        </transition-group>
      </section>
      <footer class="footer" v-show="todoRef.length > 0">
        <span class="todo-count">
          <strong>{{ remainTodoRef }}</strong>
          <span>item{{ remainTodoRef == 1 ? '' : 's' }} left</span>
        </span>
        <ul class="filters">
          <li>
            <a href="#/all" :class="{ selected: visibilityRef === 'all' }"
              >All</a
            >
          </li>
          <li>
            <a href="#/active" :class="{ selected: visibilityRef === 'active' }"
              >Active</a
            >
          </li>
          <li>
            <a
              href="#/completed"
              :class="{ selected: visibilityRef === 'completed' }"
              >Completed</a
            >
          </li>
        </ul>
        <span
          class="clear-completed"
          @click="allTodo"
          v-show="completeTodoRef > 0">
          Clear completed
        </span>
      </footer>
    </section>
  </div>
</template>

<script>
// 获取数据
import useTodoList from './composition/useTodoList'
// 新增任务
import useNewTodo from './composition/useNewTodo'
// 任务筛选
import useFilters from './composition/useFilters'
// 修改任务
import useEditTodo from './composition/useEditTodo'
// 删除任务
import useDelTodo from './composition/useDelTodo'
import numberSort from './components/number-sort.vue'
export default {
  setup() {
    //  console.log(this)  undefined
    const { todoRef } = useTodoList()
    return {
      todoRef,
      ...useNewTodo(todoRef),
      ...useFilters(todoRef),
      ...useEditTodo(todoRef),
      ...useDelTodo(todoRef),
    }
  },
  components: {
    numberSort,
  },
}
</script>
